<template>
  <div ref="echarts-line" :style="{height:height}" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'EcharsBarX',
  props: {
    command: {
      type: String,
      default: 'justice'
    },
    valuePriceList: {
      type: Array,
      default: () => []
    },
    height: {
      type: String,
      default: '220px'
    },
    proList: { // 项目编号/名称
      type: Array,
      default: () => []
    },
    gridLeft: {
      type: [String, Number],
      default: '15%'
    },
    gridRight: {
      type: [String, Number],
      default: '30%'
    }
  },
  data() {
    return {
      myChart: null // 用来存放图形实例
    }
  },
  watch: {
    proList(values) {
      if (values) {
        this.InitEcharts()
      }
    }
  },
  mounted() {
    this.InitEcharts()
  },
  beforeDestroy() {
    // 销毁监听事件
    window.removeEventListener('resize', this.resizeHandler)
    // 销毁 Echarts 实例
    this.myChart && this.myChart.dispose()
  },
  methods: {
    InitEcharts() {
      if (!this.valuePriceList.length) {
        for (let i = 0; i < 5; i++) {
          this.valuePriceList.push(0)
          this.proList.push('无')
        }
      } else if (this.valuePriceList.length < 5) {
        const num = 5 - this.valuePriceList.length
        for (let i = 0; i < num; i++) {
          if (this.command === 'reverse') {
            this.valuePriceList.unshift(0)
            this.proList.unshift('无')
          } else {
            this.valuePriceList.push(0)
            this.proList.push('无')
          }
        }
      }
      // 获取最大值背景
      let maxNum = Math.max(...this.valuePriceList)
      maxNum = maxNum === 0 ? 10000 : parseInt(maxNum * 1.1)
      const maxPriceList = this.valuePriceList.map(() => maxNum)
      // 处理钱千位分割保留2位小数
      const valuePriceList = this.valuePriceList.map((item) => {
        return this.divideMoney(item, 6, true)
      })
      this.myChart = echarts.init(this.$refs['echarts-line'])
      const options = {
        grid: {
          left: '10%',
          right: this.gridRight,
          bottom: '0',
          top: '10%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          formatter: function(params) {
            return params[0].name + '<br/>' +
                "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
                params[0].seriesName + ' : ' + (params[0].value / 10000).toFixed(6) + ' 万元<br/>'
          }
        },
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              padding: [-30, 0, 0, 0],
              align: 'left'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: this.proList
        }, {
          type: 'category',
          inverse: true,
          axisTick: 'none',
          axisLine: 'none',
          show: true,
          axisLabel: {
            textStyle: {
              color: '#ffffff',
              fontSize: '12',
              align: 'left'
            },
            formatter(value) {
              return value.toLocaleString() + '万元'
            }
          },
          data: valuePriceList
        }],
        series: [{
          name: '总合同额',
          type: 'bar',
          zlevel: 1,
          itemStyle: {
            normal: {
              barBorderRadius: 30,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: 'rgb(57,89,255,1)'
              }, {
                offset: 1,
                color: 'rgb(46,200,207,1)'
              }])
            }
          },
          barWidth: 10,
          data: this.valuePriceList
        },
        {
          name: '背景',
          type: 'bar',
          barWidth: 10,
          barGap: '-100%',
          data: maxPriceList,
          itemStyle: {
            normal: {
              color: 'rgba(24,31,68,1)',
              barBorderRadius: 30
            }
          }
        }
        ]
      }
      // 给实例对象添加配置参数
      this.myChart.setOption(options)
      // 绑定监听事件
      window.addEventListener('resize', this.resizeHandler)
    },
    resizeHandler() {
      // 图形根据容器大小来进行缩放
      this.myChart.resize()
    }
  }
}
</script>

